AngularJS Application

ஒரு நிஜ AngularJS பயன்பாட்டை உருவாக்கும் நேரம் வந்துவிட்டது.

ஷாப்பிங் பட்டியல் உருவாக்கவும்

ஒரு ஷாப்பிங் பட்டியலை உருவாக்க சில AngularJS அம்சங்களைப் பயன்படுத்தலாம், அங்கு நீங்கள் பொருட்களைச் சேர்க்கலாம் அல்லது நீக்கலாம்:

என் ஷாப்பிங் பட்டியல்

பால் ×
ரொட்டி ×
சீஸ் ×

பயன்பாடு விளக்கம்

படி 1. தொடங்குதல்:

myShoppingList என்ற பயன்பாட்டை உருவாக்குவதன் மூலம் தொடங்கவும், மேலும் அதில் myCtrl என்ற கட்டுப்படுத்தியைச் சேர்க்கவும்.

கட்டுப்படுத்தி தற்போதைய $scope க்கு products என்ற அணியைச் சேர்க்கிறது.

HTML இல், அணியில் உள்ள பொருட்களைப் பயன்படுத்தி பட்டியலைக் காண்பிக்க ng-repeat உத்தரவைப் பயன்படுத்துகிறோம்.

உதாரணம்

இப்போது வரை ஒரு அணியின் பொருட்களின் அடிப்படையில் ஒரு HTML பட்டியலை உருவாக்கியுள்ளோம்:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["பால்", "ரொட்டி", "சீஸ்"];
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

நினைவில் கொள்ள:

ng-repeat ஒவ்வொரு பொருளுக்கும் HTML உறுப்பை மீண்டும் மீண்டும் செய்கிறது. இது AngularJS இன் சக்திவாய்ந்த அம்சங்களில் ஒன்றாகும்.

படி 2. பொருட்களைச் சேர்த்தல்:

HTML இல், ஒரு உரை புலத்தைச் சேர்க்கவும், மேலும் ng-model உத்தரவுடன் பயன்பாட்டுடன் இணைக்கவும்.

கட்டுப்படுத்தியில், addItem என்ற செயல்பாட்டை உருவாக்கவும், மேலும் addMe உள்ளீட்டுப் புலத்தின் மதிப்பைப் பயன்படுத்தி products அணியில் ஒரு பொருளைச் சேர்க்கவும்.

ஒரு பொத்தானைச் சேர்க்கவும், மேலும் பொத்தான் கிளிக் செய்யப்படும்போது addItem செயல்பாட்டை இயக்கும் ng-click உத்தரவைக் கொடுக்கவும்.

உதாரணம்

இப்போது நமது ஷாப்பிங் பட்டியலில் பொருட்களைச் சேர்க்கலாம்:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["பால்", "ரொட்டி", "சீஸ்"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">சேர்க்க</button>
</div>

குறிப்பு:

ng-model உத்தரவு உரை புலத்தை AngularJS மாதிரியுடன் இணைக்கிறது. ng-click பொத்தான் கிளிக்கு பதிலளிக்கிறது.

படி 3. பொருட்களை நீக்குதல்:

ஷாப்பிங் பட்டியலிலிருந்து பொருட்களை நீக்கவும் நம்மால் முடியும்.

கட்டுப்படுத்தியில், removeItem என்ற செயல்பாட்டை உருவாக்கவும், இது நீக்க விரும்பும் பொருளின் குறியீட்டை ஒரு அளவுருவாக எடுக்கும்.

HTML இல், ஒவ்வொரு பொருளுக்கும் ஒரு <span> உறுப்பை உருவாக்கவும், மேலும் தற்போதைய $index உடன் removeItem செயல்பாட்டை அழைக்கும் ng-click உத்தரவைக் கொடுக்கவும்.

உதாரணம்

இப்போது நமது ஷாப்பிங் பட்டியலிலிருந்து பொருட்களை நீக்கலாம்:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["பால்", "ரொட்டி", "சீஸ்"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
  $scope.removeItem = function (x) {
    $scope.products.splice(x, 1);
  }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">&times;</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">சேர்க்க</button>
</div>

விளக்கம்:

$index என்பது ng-repeat மூலம் வழங்கப்படும் சிறப்பு மாறியாகும், இது தற்போதைய மறு செய்கை குறியீட்டைக் கொண்டுள்ளது.

படி 4. பிழை கையாளுதல்:

பயன்பாட்டில் சில பிழைகள் உள்ளன, எடுத்துக்காட்டாக ஒரே பொருளை இரண்டு முறை சேர்க்க முயற்சித்தால், பயன்பாடு செயலிழக்கும்.

மேலும், வெற்று பொருட்களைச் சேர்க்க அனுமதிக்கப்படக்கூடாது.

புதிய பொருட்களைச் சேர்க்கும் முன் மதிப்பைச் சரிபார்ப்பதன் மூலம் இதை சரிசெய்வோம்.

HTML இல், பிழை செய்திகளுக்கான ஒரு கொள்கலனைச் சேர்க்கிறோம், மேலும் யாராவது இருக்கும் பொருளைச் சேர்க்க முயற்சிக்கும் போது ஒரு பிழை செய்தியை எழுதுகிறோம்.

உதாரணம்

பிழை செய்திகளை எழுதும் வாய்ப்புடன் கூடிய ஷாப்பிங் பட்டியல்:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["பால்", "ரொட்டி", "சீஸ்"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "இந்த பொருள் ஏற்கனவே உங்கள் ஷாப்பிங் பட்டியலில் உள்ளது.";
    }
  }
  $scope.removeItem = function (x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">&times;</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">சேர்க்க</button>
  <p>{{errortext}}</p>
</div>

பிழை கையாளுதல்:

indexOf() முறை பொருள் ஏற்கனவே பட்டியலில் உள்ளதா எனச் சோதிக்கிறது. splice() முறை பொருளை அணியிலிருந்து நீக்குகிறது.

படி 5. வடிவமைப்பு:

பயன்பாடு வேலை செய்கிறது, ஆனால் ஒரு சிறந்த வடிவமைப்பைப் பயன்படுத்தலாம்.

எங்கள் பயன்பாட்டை வடிவமைக்க W3.CSS ஸ்டைல்ஷீட்டைப் பயன்படுத்துகிறோம்.

W3.CSS ஸ்டைல்ஷீட்டைச் சேர்க்கவும், மேலும் முழு பயன்பாட்டிலும் சரியான வகுப்புகளைச் சேர்க்கவும், இதன் விளைவு இந்தப் பக்கத்தின் மேலே உள்ள ஷாப்பிங் பட்டியலின் அதே மாதிரியாக இருக்கும்.

உதாரணம்

W3.CSS ஸ்டைல்ஷீட்டைப் பயன்படுத்தி உங்கள் பயன்பாட்டை வடிவமைக்கவும்:

<link rel="stylesheet" href="https://www.jassifteam.com/w3css/4/w3.css">

முழுமையான ஷாப்பிங் பட்டியல் பயன்பாடு

<!DOCTYPE html>
<html>
<head>
<title>ஷாப்பிங் பட்டியல் - Jassif Team</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://www.jassifteam.com/w3css/4/w3.css">
<style>
body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.shopping-list {
  max-width: 400px;
  margin: 0 auto;
}

.list-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remove-btn {
  color: red;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
}

.error {
  color: red;
  margin-top: 10px;
}
</style>
</head>
<body ng-app="myShoppingList" ng-controller="myCtrl">

<div class="w3-container w3-card-4 shopping-list">
  <h2 class="w3-text-blue">என் ஷாப்பிங் பட்டியல்</h2>
  
  <div class="w3-section">
    <input class="w3-input w3-border" 
           ng-model="addMe" 
           placeholder="புதிய பொருளை உள்ளிடுக...">
    <button class="w3-button w3-blue w3-margin-top" 
            ng-click="addItem()">
      பொருளைச் சேர்க்க
    </button>
  </div>
  
  <ul class="w3-ul">
    <li class="w3-display-container list-item" 
        ng-repeat="x in products">
      {{x}}
      <span class="w3-display-right remove-btn" 
            ng-click="removeItem($index)">
        &times;
      </span>
    </li>
  </ul>
  
  <div class="w3-panel w3-red error" ng-show="errortext">
    {{errortext}}
  </div>
</div>

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["பால்", "ரொட்டி", "சீஸ்"];
  
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {
      $scope.errortext = "தயவு செய்து ஒரு பொருளை உள்ளிடுக.";
      return;
    }
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
      $scope.addMe = ""; // உள்ளீட்டுப் புலத்தை துடைக்க
    } else {
      $scope.errortext = "இந்த பொருள் ஏற்கனவே உங்கள் ஷாப்பிங் பட்டியலில் உள்ளது.";
    }
  };
  
  $scope.removeItem = function (index) {
    $scope.errortext = "";
    $scope.products.splice(index, 1);
  };
});
</script>

</body>
</html>

பயிற்சி

கீழே உள்ள பயிற்சியில் AngularJS பயன்பாடு உருவாக்கம் பற்றிய உங்கள் புரிதலை சோதிக்கவும்:

AngularJS பயன்பாடு பயிற்சி

ng-repeat ஒரு அணியின் பொருட்களைக் காண்பிக்கப் பயன்படுகிறது

✓ சரி! ng-repeat ஒவ்வொரு அணி உறுப்புக்கும் HTML ஐ மீண்டும் மீண்டும் செய்கிறது

ng-click வெறும் உரை புலத்திற்கு மட்டுமே பயன்படுத்தப்படுகிறது

✗ தவறு! ng-click எந்த HTML உறுப்பிலும் பயன்படுத்தப்படலாம் - பொத்தான்கள், இணைப்புகள், span போன்றவை

$index ng-repeat இல் தற்போதைய குறியீட்டை வழங்குகிறது

✓ சரி! $index ng-repeat இல் தற்போது செயல்படுத்தப்படும் உறுப்பின் குறியீடு

splice() முறை பொருளை அணியின் தொடக்கத்தில் சேர்க்கிறது

✗ தவறு! splice() முறை அணியில் இருந்து உறுப்புகளை நீக்க அல்லது மாற்ற பயன்படுகிறது

நாம் என்ன கற்றுக்கொண்டோம்

மாடுல் உருவாக்கம்

angular.module() பயன்படுத்தி AngularJS மாடுலை உருவாக்குதல்

கட்டுப்படுத்திகள்

app.controller() பயன்படுத்தி கட்டுப்படுத்திகளை உருவாக்குதல்

தரவு பிணைப்பு

ng-model மூலம் HTML உறுப்புகளை $scope மாறிகளுடன் பிணைத்தல்

நிகழ்வுகள்

ng-click பயன்படுத்தி கிளிக் நிகழ்வுகளைக் கையாளுதல்

அடுத்த படிகள்

பயன்பாட்டை மேம்படுத்துங்கள்:

இந்த ஷாப்பிங் பட்டியல் பயன்பாட்டை மேம்படுத்த முயற்சிக்கவும்:

பொருட்களுக்கு அளவு மற்றும் விலையைச் சேர்க்கவும்
மொத்த விலையைக் கணக்கிடவும்
பொருட்களை வகைப்படுத்தவும்
பொருட்களைத் தேடவும்
தரவை localStorage இல் சேமிக்கவும்